<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="public/temp :: CSS(~{::title},~{::style})">
  <title>登录验证</title>
  <style>
    .formLogin {
      width: 365px;
      border-radius: 50px;
      margin: 15% auto;
      overflow: hidden;
    }

    .headTitle {
      width: 100%;
      height: 15%;
      background-color: rgba(150, 150, 150, 0.3);

    }

    .title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      text-transform: uppercase;
      letter-spacing: 5px;
      font-weight: lighter;
      text-align: center;
      padding: 8%;

    }

    .bodyContent {
      width: 100%;
      height: 85%;
      background-color: rgba(150, 150, 150, 0.5);
    }

    .loginNow {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
    }

    .input {
      width: 90%;
      margin: 12% auto;
    }

    .input>input {
      width: 100%;
      height: 5vh;
      border: 0;
      background-color: transparent;
      border-bottom: 1px solid black;
    }

    input::-webkit-input-placeholder {
      color: white;
    }

    .btn {
      width: 55%;
      padding: 5%;
      border-radius: 15px;
      text-align: center;
      background-color: darkgray;
      margin: 10% auto;
      font-size: 24px;
      font-family: Microsoft YaHei;
      text-transform: uppercase;
      letter-spacing: 5px;
      font-weight: lighter;
    }
    .btn:hover{
      cursor: pointer;
      background-color: black;
    }

  </style>
</head>

<body>
<!--JQuery-->
<script src="/assets/js/jquery-3.6.0.min.js"></script>
<div class="wrapper">
  <div class="formLogin">
    <div class="headTitle">
      <div class="title">
        HFUUTAF login
      </div>
    </div>
    <div class="bodyContent">
      <div class="loginNow">
        <div class="input">
          <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="input">
          <input type="password" id="password" placeholder="请输入密码">
        </div>
        <div class="btn" onclick="Verify()">
          login
        </div>
      </div>
    </div>
  </div>
    <script>
      function Verify() {
        $().Verify();
      }
      $(function () {
        $.fn.Verify= function () {
          let username = $('#username').val();
          let password = $('#password').val();
          $.post("/post/addClubMember?username=" +username+"&&password="+password, function (res) {
            let name="段中瑞";
            if(res){
              if (new Date().getHours()>18){
                alert(`晚上好,${name}大人`);
              }else if (new Date().getHours()>13){
                alert(`下午好,${name}大人`);
              }else if (new Date().getHours()>10){
                alert(`中午好,${name}大人`);
              }else if (new Date().getHours()>7){
                alert(`上午好,${name}大人`);
              }else if (new Date().getHours()>6){
                alert(`早上好,${name}大人`);
              }else{
                alert(`午夜好,${name}大人`);
              }
              window.location.href="/hfuuTaf/Viva";
            }else{
              alert("密码错误,请重试")
            }
          });

        }
      })

    </script>
</div>
</body>

</html>
